<template>
    <page-layout>
        <template v-slot:header>
            <el-cascader size='small'></el-cascader>
            <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            <el-button type='success' size='small' @click="addShop">新增</el-button>
        </template>
        <el-table :data="tableData"
            style="width: 100%"
            height="100%"
            size='small'>
            <el-table-column prop="user_name" label="填写人" width="120" fixed="left" >
               
            </el-table-column>
            <el-table-column prop="shop_name" label="所属门店" width="160">
               
            </el-table-column>
            <el-table-column prop="time" label="填写时间" width="180">
                
            </el-table-column>
            <el-table-column prop="progress" label="工作进度" width="100"/>
            <el-table-column prop="score" label="评分"
                show-overflow-tooltip width="100"/>
            <el-table-column prop="content" label="内容" 
            :show-overflow-tooltip="true" width="220"/>
            width="280"/>
            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="{ row }">
                    <el-button type="text" @click="detailEvt(row)" size="small">编辑</el-button>
                </template>
            </el-table-column>
           
        </el-table>
        <MeritsPicter v-model="show" @pickDataEvt="pickDataEvt"/>
        <template v-slot:footer>
            <el-pagination :page-sizes="[20, 50, 100, 150]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"/>
        </template>
    </page-layout>
   
</template>

<script>
import MeritsPicter from './MeritsPicter.vue'
import { shopMeritsApi } from '@/apis/shopApi'
export default {
    components:{MeritsPicter},
    data() {
        return {
            show:false,
            tableData: [],
            total: 0,
            query: {
                page: 1,
                size: 20,
                user_id: '',
                shop_id:'',
                content:'',
                score:'',
                progress:'',
                time:''

            },
            changeTimer: null,
            medicalType: [],
            levelType: []
        }
    },

    async mounted() {
        this.getList()
    },

    methods: {
        addShop(){
            this.show = true
        },
        pickDataEvt(rows) {
                this.$emit('input', rows.map(it => ({
                    "detail_id": it.id,
                    "name": it.name,
                    "count": 0,
                    "price": it.price,
                    "supplier_name": "",
                    "type": it.type,
                    "unit": it.unit,
                    "level": it.level,
                    "place": it.place,
                    "brand": it.brand,
                    "remark": it.remark
                })))
            },
        // 根据新的条件进行查询，那么必须从第一页开始查询
        async queryEvt() {
            this.query.page = 1
            this.getList()
        },
        // 获取列表数据的方法
        async getList() {
            let result = await shopMeritsApi(this.query)
            console.log(result)
            if (result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        sizeChange(size) {
            this.query.size = size
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        currentChange(page) {
            this.query.page = page
            if (this.changeTimer) clearTimeout(this.changeTimer)
            this.changeTimer = setTimeout(() => {
                this.getList()
            }, 100)
        },
        detailEvt(data) {
        }
    }
}
</script>

<style lang="less" scoped>
    .product-state {
        color: #999;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #999;
            margin-right: 6px;
        }
        &.sale {
            color: #409EFF;
            &::before {
                background: #409EFF;
            }
        }
        &.new {
            color: #85ce61;
            &::before {
                background: #85ce61;
            }
        }
    }
</style>